.post-popup {
  width: 100%;
  max-width: 500px;
  border-radius: 6px;
  border: #ccc;
  box-shadow: none;
  margin-bottom: 20px;

  .main-post {
    padding: 25px 25px 15px 25px;

    .post-header {
      &:extend(.flex);
      flex-wrap: nowrap;
      margin-bottom: 15px;
    }

    .follow-btn {
      margin-left: auto;
    }

    .avatar-container,
    .avatar {
      width: 45px;
      height: 45px;
    }

    .avatar-container {
      margin-right: 10px;
    }

    .name {
      font-size: 1.1rem;
      line-height: 1;
      margin-bottom: 5px;
    }

    .text {
      font-size: 1.7rem;
      margin-bottom: 5px;
    }

    .post-actions {
      margin-top: 15px;
    }
  }

  .reply-form {
    &:extend(.flex);
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 15px 25px;

    .avatar-container,
    .avatar {
      width: 30px;
      height: 30px;
    }

    .avatar-container {
      margin-right: 10px;
    }

    textarea {
      flex: 1;
      height: 32px;
      padding-top: 6.5px;
      margin-bottom: 0;

      &:not(:empty),
      &:focus {
        height: 65px;
      }
    }
  }

  .replies-container {
    border-top: 1px solid #eee;
  }

  .actions {
    flex-basis: 100%;
    justify-content: flex-end;
    display: none;

    // reset default .popup-inner .actions styles
    padding-top: 0;
    border-top: 0;

    &.editing {
      display: flex;
    }
  }
}